import React, { useEffect, useState } from 'react'
import myContext from './usecontext.js'
import InforMation from './components/InforMation'
import CommandStatistics from './components/CommandStatistics'
import MemoryInformation from './components/MemoryInformation'
import { getmonitorcache } from '@/api/systemmonitoring/ServeMonitoring.js'
import { Card } from 'antd';
import './echartsbox.scss'

export default function CacheMonitorIng() {
  const [data, setdata] = useState({
    commandStats: [],
    info: {},
  })
  useEffect(() => {
    getmonitorcachelist()
  }, [])
  const getmonitorcachelist = async () => {
    const res = await getmonitorcache()
    setdata(res.data)
  }
  return (
    <myContext.Provider value={data}>
      <div>
        <Card title="基本信息">
          <InforMation></InforMation>
        </Card>
      </div >
      <div className='echarts-box'>
        <Card title="命令统计" className='echarts-card'>
          <CommandStatistics></CommandStatistics>
        </Card>
        <Card title="内存信息" className='echarts-card'>
          <MemoryInformation ></MemoryInformation>
        </Card>
      </div>
    </myContext.Provider>
  )
}
